<template>
	<el-dialog title="添加工序" :visible.sync="dialogVisible" width="56%">
		<div class="formbox" :style="{ maxHeight: $height - 400 + 'px' }">
			<el-form size="small" ref="form" :model="form">
				<el-row>
					<el-col :span="10">
						<el-form-item label="工序编号:" prop="number" :rules="[{ required: true, message: '请输入工序编号' }]">
							<div class="">
								<el-input placeholder="请输入" class="w160" v-model="form.number"></el-input>
								<span class="ml10 f14 main_co">
									推荐编号规则
									<el-popover placement="top-start" title="编号规则:" width="200" trigger="hover">
										<div class="deepgray_f">XXX--------一般使用P1，P2……</div>
										<i slot="reference" class="el-icon-question f16 ml10 gray_f"></i>
									</el-popover>
								</span>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="工序名称:" prop="name" :rules="[{ required: true, message: '请输入工序名称' }]">
							<el-select v-model="form.name" class="w160" default-first-option allow-create filterable placeholder="请输入/创建/选择">
								<el-option v-for="item in nameList" :key="item" :label="item" :value="item"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="是否为关键工序:" required>
							<el-select placeholder="请输入/选择" v-model="form.isKey" filterable class="w100">
								<el-option label="否" :value="0"></el-option>
								<el-option label="是" :value="1"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="操作人员:" :rules="[{ required: true, message: '请选择操作人员' }]">
							<el-cascader
								style="width:87%;"
								id="el-cascader"
								ref="operateUser"
								placeholder="请选择"
								:options="renyuanList"
								v-model="form.operateUserIdList"
								:show-all-levels="false"
								:props="{
									emitPath: false,
									multiple: true,
									label: 'name',
									value: 'id'
								}"
								filterable
								@change="getMeroptions"
							></el-cascader>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="是否使用中间品:" required>
							<el-select placeholder="选择" v-model="form.isMiddle" filterable class="w140" @change="getMiddleDataList($event, form)">
								<el-option label="否" :value="0"></el-option>
								<el-option label="是" :value="1"></el-option>
							</el-select>
							<el-button size="mini" class="el-icon-circle-plus-outline ml10" type="primary" plain v-if="form.isMiddle == 1" @click="addItem(0)">增加</el-button>
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<div class="reviewList mb20" v-for="(item, i) in form.middleList" :key="i">
							<el-row>
								<el-col :span="8">
									<el-form-item label="中间品名称:" :prop="`middleList.${i}.middleName`" :rules="[{ required: form.isMiddle==1?true:false, message: '请选择中间品' }]">
										<el-select
											class="w160"
											no-data-text="没有录入中间品出库"
											v-model="item.middleName"
											filterable
											placeholder="请选择"
											@change="getMiddleNameList($event, item)"
										>
											<el-option v-for="item in productList" :key="item.id" :label="item.middleName" :value="item.id"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="中间品规格型号:" required >
										<el-input placeholder="数据带入" readonly class="w160" v-model="item.middleSku"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item class="m0" label="中间品编号:" required>
										<el-input class="w160" placeholder="数据带入" readonly v-model="item.middleNumber"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="8">
									<el-form-item class="m0" label="中间品数量:" required>
										<el-input placeholder="数据带入" readonly class="w160" v-model="item.middleQty"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item class="m0" label="单位:" required>
										<el-input class="w160" placeholder="数据带入" readonly v-model="item.unit"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<i class="error_f el-icon-delete pointer f20 delete" @click="delmiddle(form, i)"></i>
						</div>
					</el-col>
					<el-col :span="24">
						<el-form-item label="是否使用设备:" required inline>
							<el-select placeholder="请选择" v-model="form.isDevice" class="w140" @change="getdeviceDataList($event,form)">
								<el-option label="否" :value="0"></el-option>
								<el-option label="是" :value="1"></el-option>
							</el-select>
							<el-button size="mini" class="el-icon-circle-plus-outline ml10" type="primary" plain v-if="form.isDevice == 1" @click="addItem(1)">增加</el-button>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<div class="reviewList mb20" v-for="(item, i) in form.deviceList" :key="i">
							<el-row>
								<el-col :span="8">
									<el-form-item label="设备编号:" :prop="`deviceList.${i}.deviceNumber`" class="m0" :rules="[{ required: form.isDevice==1?true:false, message: '请选择设备编号' }]" >
										<el-select
											v-model="item.deviceNumber"
											no-data-text="未录入设备管理"
											class="w160"
											filterable
											default-first-option
											placeholder="请搜索/选择"
											@change="getdevice($event, item)"
										>
											<el-option v-for="v in deviceList" :key="v.id" :label="v.deviceNumber" :value="v.id"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="设备名称:" class="m0" required>
										<el-select
											v-model="item.deviceName"
											no-data-text="未录入设备管理"
											class="w160"
											filterable
											default-first-option
											placeholder="请搜索/选择"
											@change="getdevice($event, item)"
										>
											<el-option v-for="v in deviceList" :key="v.id" :label="v.name" :value="v.id"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="设备型号:" class="m0" required>
										<el-input class="w160" v-model="item.deviceModel" placeholder="数据带入" readonly ></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<i class="error_f el-icon-delete pointer f20 delete" @click="deldevice(form, i)"></i>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div slot="footer"><el-button size="small" type="primary" @click="submit">确认</el-button></div>
	</el-dialog>
</template>

<script>
import { getguifanList } from '@/api/myapi/tixiwenjian';
import { getrenyuanList } from '@/api/myapi/common';
export default {
	props: {
		type: String
	},
	data() {
		return {
			dialogVisible: false,
			productList: [],
			deviceList: [],
			renyuanList: [],
			nameList: [],
			form: {
				operateUserIdList:[],
				operateUser:[],
				type: 'add',
				name: '',
				number: '',
				isDevice: 0, //是否使用设备:0-否，1-是		false
				isKey: 0, //是否关键工序:0-否，1-是		false
				isMiddle: 0, //是否使用中间品:0-否，1-是
				deviceList: [], // 设备
				middleList: [] //  工序
			}
		};
	},
	created() {
		this.getAllrenyuanList();
	},
	methods: {
		init(item) {
			if (item){
				this.form =item;
				// this.form.operateUserIdList=item.operateUser.map(el=>el.id);
			}else{
				this.clearForm();
			}
			this.dialogVisible = true;
			this.getNameList();
		},
		getdevice(id, form) {
			let item = this.deviceList.find(e => e.id == id);
			form.deviceModel = item.model;
			form.deviceName = item.name;
			form.deviceNumber = item.deviceNumber;
		},
		//   删除设备
		deldevice(form, index) {
			form.deviceList.splice(index, 1);
			if (form.deviceList.length == 0) {
				form.isDevice = 0;
			}
		},
		//   删除中间品
		delmiddle(form, index) {
			form.middleList.splice(index, 1);
			if (form.middleList.length == 0) {
				form.isMiddle = 0;
			}
		},
		// 工序名称
		getNameList() {
			const parmas = {
				current: 1,
				size: 10000
			};
			getguifanList(parmas, 'productionmanagegongxu').then(({ data }) => {
				console.log('生产管理-工序');
				console.log(data);
				if (data && data.success) {
					let nameList = data.data.records.map(item => item.name);
					this.nameList = new Set(nameList);
				}
			});
		},

		//  设备管理
		getdeviceDataList(id, form) {
			if (id == 0) {
				form.deviceList = [];
			} else {
				form.deviceList.push({});
			}
			if (this.deviceList.length == 0) {
				this.getDevice();
			}
		},
		//  中间品出库
		getMiddleDataList(val, form) {
			if (val == 0) {
				form.middleList = [];
			} else {
				form.middleList.push({});
			}
			if (this.productList.length == 0) {
				const parmas = {
					current: 1,
					size: 10000,
					descs: 'create_time'
				};
				getguifanList(parmas, 'middlechukumiddle').then(({ data }) => {
					console.log('生产管理-中间品表');
					console.log(data);
					if (data && data.success) {
						this.productList = data.data.records;
					}
				});
			}
		},
		// 所有人员
		getAllrenyuanList() {
			getrenyuanList().then(({ data }) => {
				console.log(data);
				if (data && data.success) {
					this.renyuanList = data.data.records;
				}
			});
		},
		getMeroptions() {
			this.$nextTick(()=>{
				let operateUserRef=this.$refs.operateUser.getCheckedNodes();
				this.form.operateUser=operateUserRef.map(item=>item.data);
			})
		},
		//  添加中间品 0 添加设备 1
		addItem(type) {
			if (type == 0) {
				this.form.middleList.push({});
			} else {
				this.form.deviceList.push({});
			}
		},
		getMiddleNameList(id, form) {
			let item = this.productList.find(e => e.id == id);
			form.middleNumber = item.middleNumber;
			form.middleQty = item.middleQty;
			form.middleSku = item.middleSku;
		},
		submit() {
			this.$refs.form.validate(valid => {
				if (valid) {
					this.form.operateUserId = this.form.operateUserIdList && this.form.operateUserIdList.join(',');
					this.$emit('onConfirm', this.form);
				}
			});
		},
		clearForm() {
			this.form = {
				operateUserIdList:[],
				operateUser:[],
				type: 'add',
				name: '',
				number: '',
				isDevice: 0, //是否使用设备:0-否，1-是		false
				isKey: 0, //是否关键工序:0-否，1-是		false
				isMiddle: 0, //是否使用中间品:0-否，1-是
				deviceList: [], // 设备
				middleList: [] //  工序
			};
		},
		close() {
			this.dialogVisible = false;
			// this.$refs.form.resetFields();
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.formbox {
	overflow-y: auto;
	overflow-x: hidden;
}

.formitem {
	margin-bottom: 60px;
}
.reviewList {
	background: #ffffff;
	border: 1px dashed #e4e8ed;
	opacity: 1;
	border-radius: 0px;
	padding: 20px 14px;
	position: relative;
	box-sizing: border-box;
	.delete {
		position: absolute;
		right: 10px;
		top: 10px;
	}
}
</style>
